import { defineStore } from 'pinia'
import { nextTick } from 'vue'
import { themeSettings } from '@/settings'
import cloneDeep from 'lodash-es/cloneDeep.js'
export const useAppStore = defineStore('app', {
  state() {
    return {
      header: cloneDeep(themeSettings.header),
      reloadFlag: true,
      reloadAppFlag: true,
      isLock: false,
      asideCollapsed: false,
      headerCollapsed: false,
      lang: 'zh_CN',
    }
  },
  actions: {
    async reloadPage() {
      $loadingBar.start()
      this.reloadFlag = false
      await nextTick()
      this.reloadFlag = true
      setTimeout(() => {
        document.documentElement.scrollTo({ left: 0, top: 0 })
        $loadingBar.finish()
      }, 100)
    },
    async reloadApp() {
      this.reloadAppFlag = false
      await nextTick()
      this.reloadAppFlag = true
      setTimeout(() => {
        document.documentElement.scrollTo({ left: 0, top: 0 })
      }, 100)
    },
    switchAsideCollapsed() {
      this.asideCollapsed = !this.asideCollapsed
    },
    switchHeaderCollapsed() {
      if (this.header.height === 0) {
        this.header.height = themeSettings.header.height
      } else {
        this.header.height = 0
      }
    },
    setLockScreen(type) {
      this.isLock = type
    },
    setLanguage(languageName) {
      this.lang = languageName
    },
    setCollapsed(collapsed) {
      this.asideCollapsed = collapsed
    },
  },
  // 开启持久化
  persist: {
    enabled: true,
    strategies: [
      {
        key: 'APP_STORE_CACHE',
        storage: localStorage,
        paths: ['asideCollapsed', 'headerCollapsed', 'isLock', 'header', 'lang'],
      },
    ],
  },
})
